<script setup lang="ts">
  import { computed } from 'vue';
  type CoilCardProps = {
    title: string;
    left?: string;
    width?: string;
    height?: string;
    hideTitle?:boolean;
  };

  const props: CoilCardProps = withDefaults(defineProps<CoilCardProps>(), {
    width: '100%',
    height: '100%',
  });

  const style = computed(() => `width:${props.width};height:${props.height}`);
</script>
<template>
  <div class="container_bg" :style="style">
    <div class="ContainerTitle sub_title_bg" style="position: relative">
      <span style="position: absolute; left: 1rem">{{ left }}</span>
      <div v-if="!hideTitle" class="title-icon-left"></div>
      <span v-if="!hideTitle">{{ title }}</span>
      <div  v-if="!hideTitle" class="title-icon-right"></div>

      <!-- 添加下拉框插槽 -->
      <div style="position: absolute; width: 8rem; height: 0.7rem; right: 3rem" class="select" size="small">
        <slot name="header-right"></slot>
      </div>
    </div>
    <div class="containerContent">
      <slot></slot>
    </div>
  </div>
</template>
<style scoped>
  .container_bg {
    background-image: url(/src/assets/img/itme_bg.png);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
  }

  .ContainerTitle {
    display: flex;
    line-height: 3.5vh;
    height: 3.5vh;
    width: 100%;
    font-family: 等线;
    font-size: 1.7vh;
    background-size: 20px;
    align-items: center;
    justify-content: center;
  }

  .ContainerTitle span {
    background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bolder;
  }

  .sub_title_bg {
    background-image: url(/src/assets/img/sub_title_bg.png);
    background-size: 100% 100%;
  }

  .title-icon-left {
    margin-right: 1vw;
    transform: rotateY(180deg);
    width: 2vw;
    height: 3vh;
    background-image: url(/src/assets/img/title-icon-right.png);
    background-size: 100% 100%;
  }

  .title-icon-right {
    margin-left: 1vw;
    width: 2vw;
    height: 3vh;
    background-image: url(/src/assets/img/title-icon-right.png);
    background-size: 100% 100%;
  }

  .containerContent {
    width: 100%;
    height: 93%;
    flex-grow: 1;
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .select {
    height: 3vh;
    margin-top: -1rem;
    /* .el-select { */
    .el-input_wrapper {
      background-color: transparent !important;
      background: transparent !important;
    }

    :deep(.el-select__inner) {
      height: 20px !important;
      line-height: 20px !important;
      font-size: 11px !important;
      color: #fff !important;
      padding: 0 10px;
      background: transparent !important;
    }
    :deep(.el-select_wrapper) {
      background-color: rgba(41, 121, 255, 0.2) !important;
      border: 1px solid #42b4ff !important;
      box-shadow: 0 0 8px rgba(41, 121, 255, 0.5) !important;
      height: 22px !important;
      width: 110px;
      border-radius: 3px !important;
      transition: border-color 0.2s;
    }
    :deep(.el-select__caret) {
      font-size: 11px !important;
      color: #42b4ff;
    }
    :deep(.el-select__placeholder) {
      font-size: 11px !important;
      color: #a0a3a8 !important;
    }

    :deep(.el-select:hover:not(.el-select--disabled).el-input__wrapper) {
      background: transparent !important;
      background-color: transparent !important;
    }
    :deep(.el-select.el-input__wrapper) {
      background: transparent !important;
    }
    :deep(.el-input__suffix) {
      .el-input__suffix-inner {
        .el-icon-arrow-up ::before {
          color: white;
        }
      }
    }
  }
</style>
